/*官网例子的轨迹回放工具*/
import ol_Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import ol_geom_Point from 'ol/geom/Point.js';
import Polyline from 'ol/format/Polyline.js';
import ol_source_Vector from 'ol/source/Vector.js';
import View from 'ol/View.js';
import XYZ from 'ol/source/XYZ.js';
import {
  Circle as ol_style_Circle,
  Fill as ol_style_Fill,
  Icon as ol_style_Icon,
  Stroke as ol_style_Stroke,
  Style as ol_style_Style,
} from 'ol/style.js';
import {Tile as TileLayer, Vector as ol_layer_Vector} from 'ol/layer.js';
import {getVectorContext} from 'ol/render.js';
import ol_geom_lineString from 'ol/geom/LineString.js'
//import {getVectorContext} from 'ol/render.js';


class TrackTools {
  self = this;
  constructor(map) {
    if (!!map){
      this.map = map;
    }else{
      this.map = null;
    }
    this.animating = false;
    this.routeLength = 0;
    this.routeCoords =[];
    this.styles=null;
    this.vectorLayer = null;
    this.now = null;
    this.speed = 1;
    this.geoMarker=null;
    this.center=null;
    this.moveFeature=null;//事件
    this.startAnimation=null;
    this.stopAnimation=null;


  }

  /**
   * 设置速度
   * @param speed
   */
  setSpeed(speed){
    this.speed = speed;
  }

  /**
   * 初始化
   * @param map
   * @param points
   */
  init(map,points){
    this.map = map;
    // 轨迹
    const route = new ol_geom_lineString(points);
    this.routeCoords = route.getCoordinates();
    this.routeLength = this.routeCoords.length;
    if (!!this.vectorLayer){
      this.map.moveFeature(this.vectorLayer);
    }
    this.animating = false;
    const that = this;
    // 轨迹线要素
    const routeFeature = new ol_Feature({
      type: 'route',
      geometry: route
    });

    // 轨迹点要素
    this.geoMarker = new ol_Feature({
      type: 'geoMarker',
      geometry: new ol_geom_Point(this.routeCoords[0])
    });

    // 创建样式
    this.styles = {
      'route': new ol_style_Style({
        stroke: new ol_style_Stroke({
          width: 5,
          color: 'blue'
        })
      }),
      'geoMarker': new ol_style_Style({
        image: new ol_style_Circle({
          radius: 7,
          fill: new ol_style_Fill({color: 'red'}),
          stroke: new ol_style_Stroke({
            color: 'green',
            width: 3,
          }),
        }),
      })
    };
    // 创建要素图层
    this.vectorLayer = new ol_layer_Vector({
      source: new ol_source_Vector({
        features: [
          routeFeature,
          this.geoMarker
        ]
      }),
      style: function (feature) {
        if (!that.animating && feature.get('type') === 'geoMarker') {
          return null;
        }
        return that.styles[feature.get('type')];
      }
    });

    /**
     * 监听事件
     * Postcompose 事件触发
     */
    this.moveFeature = function (event) {
      const frameState = event.frameState;
      if (that.animating) {
        let elapsedTime = frameState.time - that.now;
        let index = Math.round(that.speed * elapsedTime / 1000);
        console.log("that.speed: %o",that.speed);
        console.log(index);
        if (index >= that.routeLength) {
          that.stopAnimation(true);
          return;
        }
        const currentPoint = new ol_geom_Point(that.routeCoords[index]);
        console.log(currentPoint);
        that.geoMarker.setGeometry(currentPoint);
      }
      that.map.render();
    };

    /**
     * 开始播放
     */
    this.startAnimation=function (){
      if (that.animating) {
        that.stopAnimation(false);
      } else {
        that.animating = true;
        that.now = new Date().getTime();
        that.geoMarker.setStyle(null);
        that.map.getView().setCenter(that.center);
        that.map.on('postcompose', that.moveFeature);
        //that.map.on('postrender', that.moveFeature);
        if (that.map.getView().getZoom() < 14){
          that.map.getView().setZoom(14);
        }
        that.map.render();
      }
    };

    // 停止动画
    this.stopAnimation=function (ended) {
      that.animating = false;
      const coord = ended ? that.routeCoords[that.routeLength - 1] : that.routeCoords[0];
      (that.geoMarker.getGeometry()).setCoordinates(coord);
      that.map.un('postcompose', that.moveFeature);
    }

    this.center=points[0];
    this.map.addLayer(this.vectorLayer);


  }

  /**
   *
   * @param map
   * @param points
   * @param action
   */
  track(map,points,action) {
    this.map = map;

    points=[
        [114.2924451828003, 30.548735055676342],
        [114.29841041564941, 30.543006308026428],
        [114.29866790771484, 30.53731418530321],
        [114.29763793945311, 30.530623666534726],
        [114.29145812988281, 30.526927049704433],
        [114.28613662719725, 30.528479645904042],
        [114.27154541015625, 30.50666709259759],
        [114.28184509277342, 30.49305949630156],
        [114.30931091308594, 30.500750980290693],
        [114.32304382324219, 30.51494904517773],
        [114.32785034179688, 30.525004753369974],
        [114.31686401367188, 30.534467998833467],
        [114.30107116699219, 30.517906714408557],
        [114.29557800292969, 30.513174400443376],
        [114.30107116699219, 30.491876137098675],
        [114.29969787597656, 30.484183951487754],
        [114.29008483886717, 30.4711650216242],
        [114.2749786376953, 30.47471581151385],
        [114.2633056640625, 30.484183951487754],
        [114.2523193359375, 30.49483450812004],
        [114.24819946289062, 30.517906714408557],
        [114.25506591796875, 30.538607878854556],
        [114.27566528320312, 30.54688710949595],
        [114.31137084960938, 30.554574334398687],
        [114.33334350585938, 30.547478456100688],
        [114.34364318847656, 30.53328514356082],
        [114.3402099609375, 30.50903343674927],
    ];
    // 轨迹
    const route = new ol_geom_lineString(points);
    this.routeCoords = route.getCoordinates();
    this.routeLength = this.routeCoords.length;

    // 轨迹线要素
    const routeFeature = new ol_Feature({
      type: 'route',
      geometry: route
    });

    // 轨迹点要素
    this.geoMarker = new ol_Feature({
      type: 'geoMarker',
      geometry: new ol_geom_Point(this.routeCoords[0])
    });

    // 创建样式
    this.styles = {
      'route': new ol_style_Style({
        stroke: new ol_style_Stroke({
          width: 5,
          color: 'blue'
        })
      }),
      'geoMarker': new ol_style_Style({
        image: new ol_style_Circle({
          radius: 7,
          fill: new ol_style_Fill({color: 'red'}),
          stroke: new ol_style_Stroke({
            color: 'green',
            width: 2,
          }),
        }),
        /*
        image: new ol_style_Circle({
          radius: 10,
          snapToPixel: false,
          fill: new ol_style_Fill({
            color: 'red'
          }),
        })*/
      })
    };


    // 创建要素图层
    this.vectorLayer = new ol_layer_Vector({
      source: new ol_source_Vector({
        features: [
          routeFeature,
          this.geoMarker
        ]
      }),
      style: function (feature) {
        if (!that.animating && feature.get('type') === 'geoMarker') {
          return null;
        }
        return that.styles[feature.get('type')];
      }
    });

    this.center=[114.2924451828003, 30.548735055676342];
    this.map.addLayer(this.vectorLayer);
    //this.map.getView().setCenter([114.2924451828003, 30.548735055676342]);


    /**
     * 监听事件
     * Postcompose 事件触发
     */
    this.moveFeature = function (event) {

      const frameState = event.frameState;

      if (that.animating) {
        let elapsedTime = frameState.time - that.now;
        let index = Math.round(that.speed * elapsedTime / 1000);
        console.log("that.speed: %o",that.speed);
        console.log(index);
        if (index >= that.routeLength) {
          that.stopAnimation(true);
          return;
        }

        const currentPoint = new ol_geom_Point(that.routeCoords[index]);
        console.log(currentPoint);
        that.geoMarker.setGeometry(currentPoint);
/*
        const feature = new ol_Feature(currentPoint);
        vectorContext.drawFeature(feature, that.styles.geoMarker);
*/
      }

      //console.log("self.map:%o",self.map);
      //console.log("that.map:%o",that.map);
      that.map.render();
    };
    /**
     * 开始播放
     */
    this.startAnimation=function (){
      if (that.animating) {
        that.stopAnimation(false);
      } else {
        that.animating = true;
        that.now = new Date().getTime();
        that.speed = 10;
        that.geoMarker.setStyle(null);
        that.map.getView().setCenter(that.center);
        that.map.on('postcompose', that.moveFeature);
        //that.map.on('postrender', that.moveFeature);

        if (that.map.getView().getZoom() < 12){
          that.map.getView().setZoom(12);
        }
        //console.log("this.map:%o",this.map);
        that.map.render();
      }
    };

    // 停止动画
    this.stopAnimation=function (ended) {
      that.animating = false;
      const coord = ended ? that.routeCoords[that.routeLength - 1] : that.routeCoords[0];
      (that.geoMarker.getGeometry()).setCoordinates(coord);
      that.map.un('postcompose', that.moveFeature);
      //that.map.un('postrender', that.moveFeature);
    }

    this.startAnimation();

  }

  /**
   * Postcompose 事件触发
   */



  // 开始动画
  startAnimation() {
    if (this.animating) {
      this.stopAnimation(false);
    } else {
      this.animating = true;
      this.now = new Date().getTime();
      this.speed = 50;
      this.geoMarker.setStyle(null);
      this.map.getView().setCenter(this.center);
      this.map.on('postcompose', this.moveFeature);

      if (this.map.getView().getZoom() < 15){
        this.map.getView().setZoom(15);
      }
      //console.log("this.map:%o",this.map);
      this.map.render();
    }
  }

  // 停止动画
  stopAnimation(ended) {
    this.animating = false;
    const coord = ended ? this.routeCoords[this.routeLength - 1] : this.routeCoords[0];
    (this.geoMarker.getGeometry()).setCoordinates(coord);
    this.map.un('postcompose', this.moveFeature);
  }

}
export default TrackTools;
